<!--
 * @description 积分任务列表组件
 * @date 2022/11/12
 -->
<template>
  <div class="integral-task-comp" :style="{ marginTop: top }">
    <div class="t-task">
      <div class="task-title">
        <div
          class="main-t"
          :class="{ paddingShow: isShowModuleName || showMore }"
        >
          {{ isShowModuleName ? moduleName : "" }}
        </div>
        <div class="sub-t din-front">
          {{ taskInfo.finished }}/{{ taskInfo.all }}
        </div>
      </div>
      <div v-for="(item, i) in taskInfo.info" :key="i" class="task-item">
        <div class="icon-box">
          <van-image :src="setImgPath(item.taskImgId)" :fit="imgType">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error>
              <img src="../../images/base/error-icon.png" alt>
            </template>
          </van-image>
        </div>
        <div class="text-box">
          <div class="main-text" v-html="item.configName || ''" />
          <div class="sub-text" v-html="item.configRemark || ''" />
          <div class="desc-text">
            已获{{ item.score }}分/每日上限{{ item.limit }}分
          </div>
        </div>
        <div v-if="item.linkType !== 0" class="btn-box">
          <div v-if="item.finished === true" class="btn finish">已完成</div>
          <div v-else class="btn to">去完成</div>
          <div class="progress-box">
            <div class="left">
              <van-progress
                :percentage="getPercent(item.score, item.limit, false)"
                :show-pivot="false"
                color="linear-gradient(to right, #32C9AE, #2DA7B5)"
              />
            </div>
            <div class="right">{{ item.score }}/{{ item.limit }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from './../mixins'
import mixin from './mixins'
export default {
  name: 'IntegralTaskComp',
  mixins: [mixins, mixin],
  props: {
    option: {
      type: Object,
      default: () => {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      taskInfo: {
        finished: 0,
        all: 0,
        info: [
          {
            bid: '',
            configCode: '',
            configName: '活动名称',
            configRemark: '活动简介',
            finished: false,
            id: '',
            limit: 0,
            linkAddress: '/',
            linkType: '1',
            points: 2,
            score: 0,
            sort: 0,
            status: '',
            taskImgId:
              'https://jnqgshengji-qy14.bjttsx.com/API-DOCUMENT/document/file/download?id=22083166155ee309814c0091db7835f226b75b.png'
          },
          {
            bid: '',
            configCode: '',
            configName: '活动名称',
            configRemark: '活动简介',
            finished: false,
            id: '',
            limit: 0,
            linkAddress: '/',
            linkType: '1',
            points: 2,
            score: 0,
            sort: 0,
            status: '',
            taskImgId:
              'https://jnqgshengji-qy14.bjttsx.com/API-DOCUMENT/document/file/download?id=2208120be3e666f821434a8a168211ec73e7c5.png'
          }
        ]
      }
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.taskInfo = this.taskInfo || []
    }
  },
  methods: {
    setData(data) {
      if (data !== 'error') {
        for (const key in data) {
          if (data[key].code === '200' && data[key].data) {
            if (key === 'classifyList') {
              this.taskInfo = data[key].data || []
            } else if (key === 'newsList') {
              this.taskInfo = data[key].data.rows || []
            } else {
              this.taskInfo = data[key].data || []
            }
          }
        }
      }
    },
    // 计算两个整数之间的百分比
    // curNum：当前数据，totalNum：总数据，isHasPercentStr：是否返回%字符
    getPercent(curNum, totalNum, isHasPercentStr) {
      curNum = parseFloat(curNum)
      totalNum = parseFloat(totalNum)
      if (isNaN(curNum) || isNaN(totalNum)) {
        return '-'
      }
      return isHasPercentStr
        ? totalNum <= 0
          ? '0%'
          : Math.round((curNum / totalNum) * 10000) / 100.0 + '%'
        : totalNum <= 0
          ? 0
          : Math.round((curNum / totalNum) * 10000) / 100.0
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";
p {
  margin: 0;
}
.integral-task-comp {
  .t-task {
    width: rem(702);
    margin: rem(0) auto;
    .task-title {
      height: rem(34);
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: rem(40);
      padding: 0 rem(15);
      .main-t {
        font-size: rem(36);
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #000000;
        &.paddingShow {
          padding: rem(23) 0;
          margin-bottom: 0;
        }
      }
      .moduleName {
        color: #222;
        font-weight: bold;
        font-size: rem(32);
      }
      .sub-t {
        font-size: rem(28);
        font-weight: 700;
        text-align: right;
        color: #666666;
      }
    }
    .task-item {
      width: rem(702);
      min-height: rem(176);
      background: #ffffff;
      border-radius: rem(20);
      margin-bottom: rem(20);
      display: flex;
      align-items: center;
      padding: rem(20) 0;
      .icon-box {
        width: rem(110);
        height: auto;
        display: flex;
        align-items: center;
        > img,
        .van-image {
          width: rem(100);
          height: rem(102);
        }
        .van-image {
          margin-top: rem(20);
        }
      }
      .text-box {
        width: rem(300);
        flex: 1;
        padding-top: rem(10);
        padding-right: rem(20);
        .main-text {
          font-size: rem(30);
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          text-align: left;
          color: #333333;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .sub-text {
          margin-top: rem(13);
          font-size: rem(24);
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: bold;
          text-align: left;
          color: #666666;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        .desc-text {
          margin-top: rem(10);
          font-size: rem(24);
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: bold;
          text-align: left;
          color: #999999;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .btn-box {
        width: rem(170);
        height: auto;
        .btn {
          margin: rem(20) rem(11) rem(0) rem(10);
          width: rem(140);
          height: rem(56);
          border-radius: rem(28);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: rem(24);
          font-family: PingFang SC, PingFang SC-Bold;
          font-weight: 700;
          color: #fff;
          &.finish {
            background: linear-gradient(#c3ccd3 0%, #aab0b6 100%);
          }
          &.to {
            @include bg-color($mainColor);
          }
        }
        .progress-box {
          height: rem(30);
          margin-top: rem(15);
          display: flex;
          align-items: center;
          padding-right: rem(10);
          .left {
            width: rem(80);
          }
          .right {
            margin-left: rem(20);
            flex: 1;
            font-size: rem(20);
            font-family: PingFang SC, PingFang SC-Bold;
            font-weight: 700;
            text-align: left;
            color: #999999;
          }
        }
      }
    }
  }
}
</style>
